<template>
  <div>
<h2 style="text-align:center;">影片</h2>
 <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col
        :offset="index>0?0:1"
        :span="4"
        v-for="(o, index) in MovieInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        :key="index"
      >
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <el-button style="padding:0" @click="SelectMovie(o.MovieID);drawer = true">
            <img :src="o.MovieImg" class="image" />
            <div style="padding: 14px;">
              <span>{{o.MovieName}}</span>
              <div>
                <el-button type="text" style="float:right">详情</el-button>
              </div>
            </div>
          </el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="5"
      background
      layout="prev, pager, next"
      :total="MovieInfo.length"
      style="float:right;margin-right:200px;"
    ></el-pagination>
    <el-drawer title="电影详情"
    :append-to-body="true"
     :visible.sync="drawer" size="40%">
      <MovieInfo :key="id"></MovieInfo>
    </el-drawer>
  </div>
</template>
<script>
import MovieInfo from "@/views/MovieInfo";
export default {
  components: {
    MovieInfo
  },
  props:[
      'MovieName'],
  data() {
    return {
      MovieInfo: [],
      currentPage: 1,
      pagesize: 5,
      drawer: false,
      id: +new Date(),
    };
  },methods: {
      handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },SelectMovie(MovieID) {
      this.$store.commit("UpdateMovieID", MovieID);
      this.id = +new Date();
    },
  },created() {
      this.Ajax.get("api/MovieInfoes/GetMovieByName?Name="+this.MovieName).then(M=>{
          this.MovieInfo=M.data
      })
  },
};
</script>